<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		
        <title>Dulcet - Admin Theme </title>
		
		<!-- ==================================================================================== 
			STYLES BEGIN 
		===================================================================================== -->
		
		<!-- Global styles -->
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/grid.css" />
		<link rel="stylesheet" type="text/css" href="css/config.css" />

		<!-- Plugin configuration (styles) -->
		<link rel="stylesheet" href="css/plugin_config.css" />
		
		<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
		
		
		<!-- ======================================================================================
			SCRIPTS BEGIN
		======================================================================================= -->
        
	<!-- = Global Scripts [required for template] 
		***************************************************************************************-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/global_plugins_scripts.js"></script>
		
		
		
	<!-- = From Plugins Dir 
		***************************************************************************************-->
		
		<script type="text/javascript" src="plugins/lightbox/js/lightbox/jquery.lightbox.min.js"></script>
		<script type="text/javascript" src="plugins/jqueryui/all/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="plugins/validator/js/languages/jquery.validationEngine-en.js"></script>
		<script type="text/javascript" src="plugins/validator/js/jquery.validationEngine.js"></script>
		<script type="text/javascript" src="plugins/dialogs/jquery-fallr-1.2.js"></script>
		<script type="text/javascript" src="plugins/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
		<script type="text/javascript" src="plugins/spin/jquery-spin.js"></script>
		<script type="text/javascript" src="plugins/qtip/jquery.qtip.min.js"></script>
		<script type="text/javascript" src="plugins/plupload/js/browserplus-min.js"></script>
		<script type="text/javascript" src="plugins/plupload/js/plupload.full.js"></script>
		<script type="text/javascript" src="plugins/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
		<script type="text/javascript" src="plugins/multiselect/js/ui.multiselect.js"></script>			
		<script type="text/javascript" src="plugins/datatables/media/js/jquery.dataTables.js"></script>	
		<script type="text/javascript" src="plugins/alerts/javascript/jquery.toastmessage.js"></script>	
		<script type="text/javascript" src="plugins/prettify/prettify.js"></script>
		<script type="text/javascript" src="plugins/fullcalendar/fullcalendar.min.js"></script>
				
		<script type="text/javascript" src="plugins/fileexplorer/js/elfinder.min.js"></script>	
		<!--<script src="plugins/fileexplorer/js/i18n/elfinder.ru.js" type="text/javascript" charset="utf-8"></script>-->	
		
		<!-- Flotr2 Charts -->
		<script type="text/javascript" src="plugins/flotr2/flotr2.min.js"></script>
		<!--[if IE 8]><script type="text/javascript" src="plugins/flotr2/flotr2.ie.min.js"></script><![endif]-->
		
		<!-- color picker -->
		<script type="text/javascript" src="plugins/colorpicker/js/colorpicker.js"></script>
		<script type="text/javascript" src="plugins/colorpicker/js/eye.js"></script>
		<script type="text/javascript" src="plugins/colorpicker/js/utils.js"></script>
		<script type="text/javascript" src="plugins/colorpicker/js/layout.js"></script>
		
		
		
	<!-- = From JS Dir
		****************************************************************************************-->
		
		<script type="text/javascript" src="js/modernizr.custom.js"></script>
		<script type="text/javascript" src="js/jquery.autogrowtextarea.js"></script>
		<script type="text/javascript" src="js/jquery.autotab-1.1b.js"></script>
		
		<!-- From JS Dir [plugin initialization] -->
		<script type="text/javascript" src="js/dialog_fallr_init.js"></script>
		<script type="text/javascript" src="js/tiny_mce_init.js"></script>
		<script type="text/javascript" src="js/datatables_init.js"></script>
		<script type="text/javascript" src="js/head_scripts.js"></script>
				
		
    </head>
    <body>
				
		<section id="layout">
		
			<div class="logo_profile container_12">
				<div class="grid_6 logo_img">
					<img src="images/logo.png" alt="Logo" />
				</div>
				<div class="grid_6 profile_meta">
					<div class="user_meta">
						<div>
							<img src="images/smartik.jpg" alt="" />
						</div>
						<div class="name">
							Welcome Smartik <br />
							<a href="#" class="submeta">Profile</a>
							<a href="#" class="submeta">Logout</a>
						</div>
					</div>
				</div>
			
				<div class="clear"></div>
			</div>
	
			<section id="top">
					
				<section id="top_bar">						
					<section id="main_menu">
						<ul class="sf-menu">
							<li><a href="index.html">Dashboard</a></li>
							<li><a href="#">Elements</a>
								<ul>
									<li><a href="form_elements.html">Form elements</a></li>
									<li><a href="user_interface.html">User Interface</a></li>
									<li><a href="generic_icons.html">Generic icons</a></li>
									<li><a href="tabs_accordion.html">Tabs Accordion</a></li>
									<li><a href="grid.html">Template grid</a></li>
									<li><a href="#">Another menu level</a>
										<ul>
											<li><a href="#">Lorem ipsum</a></li>
											<li><a href="#">Dolor sit amet</a></li>
											<li><a href="#">Aenean molestie</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="#">Plugins</a>
								<ul>
									<li><a href="charts.html">Charts</a></li>
									<li><a href="datatables.html">Data tables</a></li>
									<li><a href="syntax_highlight.html">Syntax Highlighter</a></li>
									<li><a href="form_plugins.html">Form specific plugins</a></li>
									<li><a href="file_explorer.html">File explorer</a></li>
									<li><a href="full_calendar.html">Full calendar</a></li>
								</ul>
							</li>
							<li><a href="#">Gallery example</a>
								<ul>
									<li><a href="gallery.html">Gallery 1</a></li>
									<li><a href="gallery2.html">Gallery 2</a></li>
								</ul>
							</li>
							<li><a href="#">Documentation</a>
								<ul>
									<li><a href="zHtmlstructure.html">HTML Structure</a></li>
									<li><a href="zForms.html">Forms Structure</a></li>
									<li><a href="zColorpicker.html">Color Picker</a></li>									
									<li><a href="zDatepicker.html">Date Picker</a></li>									
									<li><a href="zSlider.html">Slider</a></li>									
									<li><a href="zProgressbar.html">Progress Bar</a></li>						
									<li><a href="zTabs.html">Tabs</a></li>		
									<li><a href="zAccordion.html">Accordion</a></li>		
									<li><a href="zCharts.html">Charts( Flotr2 )</a></li>	
									<li><a href="zDataTables.html">Data Tables</a></li>
									<li><a href="zFileExplorer.html">File Explorer( elFinder )</a></li>
									<li><a href="zDialogsAlerts.html">Dialogs &amp; Alerts</a></li>
									<li><a href="zRequirements.html">Requirements</a></li>
								</ul>
							</li>
						</ul>							
					<div class="clear"></div>
					</section><!-- End of #main_menu -->
				</section><!-- End of #top_bar -->
				<div class="clear"></div>
				
				<section class="top_in">	
					<section id="second_top_bar">
						<div id="quick_task" class="jThumbnailScroller">
							<div class="jTscrollerContainer">
							<div class="clear"></div>
								<ul class="jTscroller">
									<li><a href="#"><span class="icon1"></span>Dashboard</a></li>
									<li><a href="#"><span class="icon2"></span>Forms</a></li>
									<li><a href="#"><span class="icon3"></span>Charts</a></li>
									<li><a href="#"><span class="icon4"></span>Organizer</a></li>
									<li><a href="#"><span class="icon5"></span>Settings</a></li>
									<li><a href="#"><span class="icon7"></span>Tables</a></li>
									<li><a href="#"><span class="icon6"></span>Contacts</a></li>
									<li><a href="#"><span class="icon8"></span>File explorer</a></li>
									<li><a href="#"><span class="icon9"></span>Users</a></li>
									<li><a href="#"><span class="icon10"></span>Upload</a></li>
									<li><a href="#"><span class="icon13"></span>Download</a></li>
									<li><a href="#"><span class="icon11"></span>Plus</a></li>
									<li><a href="#"><span class="icon12"></span>Add product</a></li>
									<li><a href="#"><span class="icon14"></span>Photos</a></li>
									<li><a href="#"><span class="icon15"></span>Comments</a></li>
									<li><a href="#"><span class="icon17"></span>New mail</a></li>
									<li><a href="#"><span class="icon16"></span>Database</a></li>
									<li><a href="#"><span class="icon18"></span>Favorites</a></li>
									<li><a href="#"><span class="icon19"></span>Security settings</a></li>
									<li><a href="#"><span class="icon20"></span>New page</a></li>
								</ul>
								<div class="clear"></div>
							</div>										
							<div class="clear"></div>
						</div>
						<div class="clear"></div>						
					</section><!-- End of #second_top_bar -->
				</section><!-- End of .top_in -->
				
			</section><!-- End of #top -->
			

			
	
			<section id="container" class="container_12">
			
			
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_3d"></span>Forms</div>
						
						<div class="inside">
							<!-- formee-->
							<form class="formee" action="#">
								<div class="in">
							
									<div class="grid-3-12"><label>Default input field </label></div>
									<div class="grid-9-12"><input type="text" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Required asterisk <em class="formee-req">*</em></label></div>
									<div class="grid-9-12"><input type="text" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Input placeholder </label></div>
									<div class="grid-9-12"><input type="text" placeholder="This is the placeholder text" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Pre-defined value </label></div>
									<div class="grid-9-12"><input type="text" value="Fill up the field" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Input field - subtip </label></div>
									<div class="grid-9-12">
										<input type="text" />
										<span class="subtip">Some tips here! You can write anything to describe the input field.</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>ReadOnly </label></div>
									<div class="grid-9-12"><input type="text" readonly="readonly" value="This text can be read only" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Disabled </label></div>
									<div class="grid-9-12"><input type="text" disabled="disabled" value="This field is disabled, you can't edit it" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Character limit (max: 15) </label></div>
									<div class="grid-9-12"><input type="text" maxlength="15" placeholder="Maximum 15 characters" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Password input field </label></div>
									<div class="grid-9-12"><input type="password" /></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
																		
									<div class="grid-3-12"><label>Default textarea </label></div>
									<div class="grid-9-12"><textarea></textarea></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>AutoGrow textarea </label></div>
									<div class="grid-9-12"><textarea class="txt_autogrow" rows="8"></textarea></div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Checkbox Buttons </label></div>
									<div class="grid-9-12">
										<ul class="formee-list">
											<li><input name="checkbox-01" type="checkbox" /> <label>Default</label></li>
											<li><input name="checkbox-02" type="checkbox" checked="checked" /> <label>Checked</label></li>
											<li><input name="checkbox-03" type="checkbox" disabled="disabled" /> <label>Disabled</label></li>
											<li><input name="checkbox-04" type="checkbox" disabled="disabled" checked="checked" /> <label>Checked disabled</label></li>
										</ul>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Radio buttons </label></div>
									<div class="grid-9-12">
										<ul class="formee-list">
											<li><input name="radio-01" type="radio" /><label>Default</label></li>
											<li><input name="radio-01" type="radio" checked="checked" /><label>Checked</label></li>
											<li><input name="radio-01" type="radio" disabled="disabled" /><label>Disabled</label></li>
											<li><input name="radio-02" type="radio" disabled="disabled" checked="checked" /><label>Checked disabled</label></li>
										</ul>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Upload field </label></div>
									<div class="grid-9-12">
										<input type="file" name="file" />
										<span class="subtip">Max. file size 30720 Kb.</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Default just select </label></div>
									<div class="grid-9-12">
										<select data-placeholder="Choose a Country..." class="chzn-select" style="max-width:350px;" tabindex="1">
											<option value=""></option> 
											<option value="United States">United States</option> 
											<option value="United Kingdom">United Kingdom</option> 
											<option value="Rusian Federation">Rusian Federation</option> 
											<option value="Italy">Italy</option> 
											<option value="Spain">Spain</option>
										</select>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Default select/deselect </label></div>
									<div class="grid-9-12">
										<select data-placeholder="Choose a Country..." class="chzn-select-deselect" style="max-width:350px;" tabindex="1">
											<option value=""></option> 
											<option value="United States">United States</option> 
											<option value="United Kingdom">United Kingdom</option> 
											<option value="Rusian Federation">Rusian Federation</option> 
											<option value="Italy">Italy</option> 
											<option value="Spain">Spain</option>
										</select>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Group select </label></div>
									<div class="grid-9-12">
										<select data-placeholder="Your Favorite Football Team" style="max-width:350px;" class="chzn-select" tabindex="5">
										  <option value=""></option>
										  <optgroup label="NFC East">
											<option>Dallas Cowboys</option>
											<option>New York Giants</option>
											<option>Philadelphia Eagles</option>
											<option>Washington Redskins</option>
										  </optgroup>
										  <optgroup label="NFC NORTH">
											<option>Chicago Bears</option>
											<option>Detroit Lions</option>
											<option>Green Bay Packers</option>
											<option>Minnesota Vikings</option>
										  </optgroup>
										  <optgroup label="NFC SOUTH">
											<option>Atlanta Falcons</option>
											<option>Carolina Panthers</option>
											<option>New Orleans Saints</option>
											<option>Tampa Bay Buccaneers</option>
										  </optgroup>
										  <optgroup label="NFC WEST">
											<option>Arizona Cardinals</option>
											<option>St. Louis Rams</option>
											<option>San Francisco 49ers</option>
											<option>Seattle Seahawks</option>
										  </optgroup>
										  <optgroup label="AFC EAST">
											<option>Buffalo Bills</option>
											<option>Miami Dolphins</option>
											<option>New England Patriots</option>
											<option>New York Jets</option>
										  </optgroup>
										  <optgroup label="AFC NORTH">
											<option>Baltimore Ravens</option>
											<option>Cincinnati Bengals</option>
											<option>Cleveland Browns</option>
											<option>Pittsburgh Steelers</option>
										  </optgroup>
										  <optgroup label="AFC SOUTH">
											<option>Houston Texans</option>
											<option>Indianapolis Colts</option>
											<option>Jacksonville Jaguars</option>
											<option>Tennessee Titans</option>
										  </optgroup>
										  <optgroup label="AFC WEST">
											<option>Denver Broncos</option>
											<option>Kansas City Chiefs</option>
											<option>Oakland Raiders</option>
											<option>San Diego Chargers</option>
										  </optgroup>
										</select>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									
									<div class="grid-3-12"><label>Multiple select </label></div>
									<div class="grid-9-12">
										<select data-placeholder="Your Favorite Football Team" style="max-width:350px;" class="chzn-select" multiple tabindex="6">
										  <option value=""></option>
										  <optgroup label="NFC East">
											<option>Dallas Cowboys</option>
											<option>New York Giants</option>
											<option>Philadelphia Eagles</option>
											<option>Washington Redskins</option>
										  </optgroup>
										  <optgroup label="NFC NORTH">
											<option>Chicago Bears</option>
											<option>Detroit Lions</option>
											<option>Green Bay Packers</option>
											<option>Minnesota Vikings</option>
										  </optgroup>
										  <optgroup label="NFC SOUTH">
											<option>Atlanta Falcons</option>
											<option>Carolina Panthers</option>
											<option>New Orleans Saints</option>
											<option>Tampa Bay Buccaneers</option>
										  </optgroup>
										  <optgroup label="NFC WEST">
											<option>Arizona Cardinals</option>
											<option>St. Louis Rams</option>
											<option>San Francisco 49ers</option>
											<option>Seattle Seahawks</option>
										  </optgroup>
										  <optgroup label="AFC EAST">
											<option>Buffalo Bills</option>
											<option>Miami Dolphins</option>
											<option>New England Patriots</option>
											<option>New York Jets</option>
										  </optgroup>
										  <optgroup label="AFC NORTH">
											<option>Baltimore Ravens</option>
											<option>Cincinnati Bengals</option>
											<option>Cleveland Browns</option>
											<option>Pittsburgh Steelers</option>
										  </optgroup>
										  <optgroup label="AFC SOUTH">
											<option>Houston Texans</option>
											<option>Indianapolis Colts</option>
											<option>Jacksonville Jaguars</option>
											<option>Tennessee Titans</option>
										  </optgroup>
										  <optgroup label="AFC WEST">
											<option>Denver Broncos</option>
											<option>Kansas City Chiefs</option>
											<option>Oakland Raiders</option>
											<option>San Diego Chargers</option>
										  </optgroup>
										</select>
									</div>
									<div class="clear"></div>
									
									<!-- ====================== -->
										
								</div><!-- End .in class -->
								
								<!--Form footer begin-->
								<section class="box_footer">
									<div class="grid-12-12">
										<input type="reset" class="right button red" value="Clear" />
										<input type="submit" class="right button green" value="Submit form" />
									</div>
									<div class="clear"></div>
								</section>
								<!--Form footer end-->
								
							</form>
							<!-- formee-->
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
			
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_pyramid"></span>Tags field</div>
						
						<div class="inside">
							<div class="in">
								<!-- formee-->
								<form class="formee" action="#">
																		
									<div class="grid-3-12"><label>Tags select </label></div>
									<div class="grid-9-12">
									
										<input id="quick_tags" type="text" />
										
										<div class="tags_select">
											Popular (click to select):
											<a href="#">premium</a>
											<a href="#">wordpress</a>
											<a href="#">joomla</a>
											<a href="#">free</a>
											<a href="#">HTML</a>
											<a href="#">HTML5</a>
											<a href="#">CSS3</a>
											<a href="#">corporate</a>
											<a href="#">business</a>
											<a href="#">clean</a>
											<a href="#">creative</a>
											<a href="#">modern</a>
											<a href="#">responsive</a>
											<a href="#">minimal</a>
											<a href="#">portfolio</a>
											<a href="#">personal</a>
											<a href="#">photography</a>
											<a href="#">unlimited colors</a>
										</div>
										
									</div>
									<div class="clear"></div>
									
								</form>
								<!-- formee-->
							</div>
						</div>
						
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
				
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_frames"></span>Autotab</div>
						<div class="inside">
							<div class="in">
								<!-- formee-->
								<form class="formee" action="#">
								
										<div class="grid-3-12"><label>Any character: </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField1" id="aField1" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField2" id="aField2" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField3" id="aField3" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField4" id="aField4" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField5" id="aField5" maxlength="5" class="sizew75" />
										</div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-3-12"><label>Any character except numbers 0 through 9: </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField6" id="aField6" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField7" id="aField7" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField8" id="aField8" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField9" id="aField9" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField10" id="aField10" maxlength="5" class="sizew75" />
										</div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										
										<div class="grid-3-12"><label>A through Z (alpha, uppercase): </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField11" id="aField11" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField12" id="aField12" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField13" id="aField13" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField14" id="aField14" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField15" id="aField15" maxlength="5" class="sizew75" />
										</div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-3-12"><label>Numeric(0 through 9): </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField16" id="aField16" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField17" id="aField17" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField18" id="aField18" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField19" id="aField19" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField20" id="aField20" maxlength="5" class="sizew75" />
										</div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-3-12"><label>Number (identical to numeric): </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField21" id="aField21" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField22" id="aField22" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField23" id="aField23" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField24" id="aField24" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField25" id="aField25" maxlength="5" class="sizew75" />
										</div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-3-12"><label>AlphaNumeric: </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField26" id="aField26" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField27" id="aField27" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField28" id="aField28" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField29" id="aField29" maxlength="5" class="sizew75" /> - 
												<input type="text" name="aField30" id="aField30" maxlength="5" class="sizew75" />
										</div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										
										<div class="grid-3-12"><label>Custom Example (Phone number): </label></div>
										<div class="grid-9-12">
												<input type="text" name="aField31" id="aField31" maxlength="3" class="sizew50" /> - 
												<input type="text" name="aField32" id="aField32" maxlength="3" class="sizew50" /> - 
												<input type="text" name="aField33" id="aField33" maxlength="4" class="sizew70" />
										</div>
										<div class="clear"></div>
										
										<!-- ====================== -->
																	
								</form>
								<!-- formee-->
							</div>
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
				
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_flip_vertical"></span>Spinner Elements</div>
						<div class="inside">
							<div class="in">
								<!-- formee-->
								<form class="formee" action="#">
									<section class="grid_6">
										<div class="grid-5-12"><label>Default functionality </label></div>
										<div class="grid-7-12"><input type="input" id="spin1" class="spin_input sizew150" value="0" /></div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-5-12"><label>Interval: 5 </label></div>
										<div class="grid-7-12"><input type="input" id="spin2" class="spin_input sizew150" value="0" /></div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->

										<div class="grid-5-12"><label>Max: 10, Min: -5 </label></div>
										<div class="grid-7-12"><input type="input" id="spin3" class="spin_input sizew150" value="0" /></div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-5-12"><label>timeInterval: 250 </label></div>
										<div class="grid-7-12"><input type="input" id="spin4" class="spin_input sizew150" value="0" /></div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
									</section>
									<section class="grid_6">
										<div class="grid-5-12"><label>Safe float calcuration </label></div>
										<div class="grid-7-12"><input type="input" id="spin5" class="spin_input sizew150" value="9.95" /></div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-5-12"><label>Prohibit direct change </label></div>
										<div class="grid-7-12"><input type="input" id="spin6" class="spin_input sizew150" value="0" /></div>
										<div class="clear"></div>
										<hr />
										
										<!-- ====================== -->
										
										<div class="grid-5-12"><label>Callback </label></div>
										<div class="grid-7-12">
											<input type="input" id="spin7" class="spin_input sizew150" value="0" />
											<span id="spin_console"></span>
										</div>
										<div class="clear"></div>
										
										<!-- ====================== -->
									</section>
																		
								</form>
								<!-- formee-->
							</div>
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
				
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_delete"></span>Form validation</div>
						
						<div class="inside">
							<!-- formee-->
							<form id="form_id1" class="formee" action="#">
								
								<div class="in">
									<div class="grid-3-12"><label>Validate DEFAULT: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field1" id="field1" class="validate[required]" />
										<span class="subtip">Type anything</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
																													
									<div class="grid-3-12"><label>Validate URL: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field2" id="field2" class="validate[required,custom[url]]" value="http://" />
										<span class="subtip">URL begin with http:// https:// or ftp://</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Validate EMAIL: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field3" id="field3" class="validate[required,custom[email]]" />
										<span class="subtip">Example: webmaster@domain.com</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Validate IP ADRESS: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field4" id="field4" class="validate[required,custom[ipv4]]" />
										<span class="subtip">Example: 192.168.3.25</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Validate DATE: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field5" id="field5" class="validate[required,custom[date]]" />
										<span class="subtip">Example: 2012-01-17</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Validate NUMBER: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field6" id="field6" class="validate[required,custom[number]]" />
										<span class="subtip">A signed floating number, ie: -3849.354, 38.00, 38, .77</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Validate INTEGER: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field7" id="field7" class="validate[required,custom[integer]]" />
										<span class="subtip">An signed integer, ie: +34, 34 or -1</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Only Letters &amp; Numbers: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field8" id="field8" class="validate[required,custom[onlyLetterNumber]]" />
										<span class="subtip">Admissible only [0-9a-zA-Z]</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Only Numbers (char): <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field9" id="field9" class="validate[required,custom[onlyNumberSp]]" />
										<span class="subtip">Admissible only [0-9] and space</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Only Letters: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field10" id="field10" class="validate[required,custom[onlyLetterSp]]" />
										<span class="subtip">Only ASCII letters, space and '</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>MinSize: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field11" id="field11" class="validate[required,minSize[6]]" />
										<span class="subtip">Minimum 6 charaters</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>MaxSize: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field12" id="field12" class="validate[required,maxSize[6]]" />
										<span class="subtip">Maximum 6 charaters</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Minimum Integer: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field13" id="field13" class="validate[required,custom[integer],min[-5]]" />
										<span class="subtip">Minimum integer value allowed "-5"</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Maximum Integer: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field14" id="field14" class="validate[required,custom[integer],max[50]]" />
										<span class="subtip">Maximum integer value allowed "50"</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Past date: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field15" id="field15" class="validate[custom[date],past[2012-01-01]]" value="2012-01-15" />
										<span class="subtip">Checks that the value is a date in the past. Please enter a date ealier than 2012-01-01</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Future date: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input type="text" name="field16" id="field16" class="validate[custom[date],future[NOW]]" value="2000-01-15" />
										<span class="subtip">Checks that the value is a date in the future. Please enter a date older than today's date</span>
									</div>
									<div class="clear"></div>
									
									<!-- ====================== -->								
								
								</div> <!-- End .in class -->
								
								
								<!--Form footer begin-->
								<section class="box_footer">
									<div class="grid-12-12">
										<input type="submit" class="right button green" value="Validate" />
									</div>
									<div class="clear"></div>
								</section>
								<!--Form footer end-->
								
																
							</form>
							<!-- formee-->							
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
				
				
				
				
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_delete"></span>Custom Form validation Messages</div>
						
						<div class="inside">							
							<!-- formee-->
							<form id="form_id2" class="formee" action="#">
								<div class="in">
									
									<div class="grid-3-12"><label>Username: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input value="" class="validate[required,custom[username]]" type="text" name="field21" id="field21" />
										<span class="subtip">Please enter your username</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>First name: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input value="" class="validate[required,custom[firstName]]" type="text" name="field22" id="field22" />
										<span class="subtip">Only letters accepted</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Last name: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input value="" class="validate[required,custom[lastName]]" type="text" name="field23" id="field23" />
										<span class="subtip">Only letters accepted</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
									
									<div class="grid-3-12"><label>Password for login form: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input value="" class="validate[required,custom[passwordLogin]]" type="password" name="field24" id="field24" />
										<span class="subtip">Any character</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
																			
									<div class="grid-3-12"><label>Password for register form: <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input value="" class="validate[required,minSize[6]]" type="password" name="field25" id="field25" />
										<span class="subtip">Any character</span>
									</div>
									<div class="clear"></div>
									<hr />
									
									<!-- ====================== -->
																			
									<div class="grid-3-12"><label>Password for register form (confirm): <em class="formee-req">*</em></label></div>
									<div class="grid-9-12">
										<input value="" class="validate[required,equals[password],minSize[6]]" type="password" name="field26" id="field26" />
										<span class="subtip">Any character</span>
									</div>
									<div class="clear"></div>
									
									<!-- ====================== -->
									
									
								</div><!-- End .in class -->
								
								
							
								<!--Form footer begin-->
								<section class="box_footer">
									<div class="grid-12-12">
										<input type="submit" class="right button green" value="Validate" />
									</div>
									<div class="clear"></div>
								</section>
								<!--Form footer end-->
								
										
							</form>
							<!-- formee-->
							
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
				
				
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_3d"></span>Form - another "label" position</div>
						<div class="inside">
							<!-- formee-->
							<form class="formee" action="#">
								<div class="in">
							
									<div class="grid-4-12">
											<label>Reason for contact</label>
											<select data-placeholder="Please select one..." class="chzn-select" style="width:100%;" tabindex="1">
												<option value=""></option> 
												<option value="Option select 1">Option select 1</option>
												<option value="Option select 2">Option select 2</option>
												<option value="Option select 3">Option select 3</option>
												<option value="Option select 4">Option select 4</option>
											</select>
									</div>
									<div class="grid-4-12">
											<label>Your name <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-4-12">
											<label>Your e-mail address <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-12-12">
											<label>Subject <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-12-12">
											<label>Please type your message below <em class="formee-req">*</em></label>
										   <textarea></textarea>
									</div>
									
								</div><!-- End .in class -->
										
										
								<!--Form footer begin-->
								<section class="box_footer">
									<div class="grid-6-12">
										<ul class="formee-list">
											<li><input name="checkbox-01" type="checkbox" /> <label>Join our weekly specials newsletter.</label></li>
										</ul>
									</div>
									<div class="grid-6-12">
										<input type="submit" class="right button green" value="Submit form" />
									</div>
									<div class="clear"></div>
								</section>
								<!--Form footer end-->
								
								
							</form>
							<!-- formee-->
							
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><span class="icon16_sprite i_spreadsheet"></span>Forms Grid - 12 columns grid form system</div>
						<div class="inside">
							<div class="in">
								<!-- formee-->
								<form class="formee" action="#">
									
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-1-12">
											<label>1-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									<div class="grid-2-12">
											<label>2-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-2-12">
											<label>2-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-2-12">
											<label>2-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-2-12">
											<label>2-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-2-12">
											<label>2-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-2-12">
											<label>2-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									<div class="grid-3-12">
											<label>3-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-3-12">
											<label>3-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-3-12">
											<label>3-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-3-12">
											<label>3-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									<div class="grid-4-12">
											<label>4-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-4-12">
											<label>4-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-4-12">
											<label>4-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									<div class="grid-5-12">
											<label>5-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-5-12">
											<label>5-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									
									<div class="grid-6-12">
											<label>6-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									<div class="grid-6-12">
											<label>6-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									
									<div class="grid-7-12">
											<label>7-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									
									<div class="grid-8-12">
											<label>8-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									
									<div class="grid-9-12">
											<label>9-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									
									<div class="grid-10-12">
											<label>10-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									
									<div class="grid-11-12">
											<label>11-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									
									<div class="grid-12-12">
											<label>12-12 <em class="formee-req">*</em></label>
										   <input type="text" />
									</div>
									
									
									<div class="clear"></div>
								</form>
								<!-- formee-->
							</div>
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
			</section><!-- End of #container -->
			

			
			
		</section><!-- End of #layout -->
		<div class="clear"></div>

		<section id="footer_bar">
			<div class="copyr">Copyright &copy; Smartik 2012</div>
		</section>		
		
		
		<!-- Bottom Scripts -->
		<script type="text/javascript" src="js/jqueryui_init.js"></script>
		<script type="text/javascript" src="js/flotr2_init.js"></script>	
		<script type="text/javascript" src="js/bottom_scripts.js"></script>
		<script type="text/javascript" src="js/custom_pages.js"></script>
		<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>
				
    </body>
</html>